<!--
 * @description 通用标签组件
 * @author guojiteng
 * @date 2022/11/15
 -->
<template>
  <div v-if="labelList.length>0" class="fixd-tag">
    <template v-for="(label, n) in labelList">
      <span
        v-if="label.showType==='BQZSLX_WZ' && label.type && label.position"
        :key="n"
        class="activity-label"
        :class="getClass(label.position)"
        :style="labelStyle(label.showType,label.style)"
      >
        {{ label.name }}
      </span>
      <img v-else-if="label.showType==='BQZSLX_TP' && label.type" class="activity-img a-img" :style="labelStyle(label.showType,label.style)" :class="getClass(label.position)" :src="getIcon(label)" alt="">
    </template>
  </div>
</template>
<script>
export default {
  name: 'LabelCopm',
  props: {
    labelList: {
      type: Array,
      default: () => { return [] }
    },
    className: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      view: '/API-DOCUMENT/document/file/download?id='
    }
  },
  computed: {
    getClass() {
      return (a) => {
        const arr = []
        if (a === 'default') {
          arr.push(this.className)
          arr.push('clear')
        } else {
          arr.push(a)
        }
        return arr
      }
    },
    labelStyle() {
      return (t, style) => {
        let s = ''
        if (t === 'BQZSLX_WZ') {
          s += `padding:${this.px2rem(10)};`
        }
        if (style.fontSize) {
          s += `font-size: ${this.px2rem(style.fontSize)};`
        }
        if (style.fontColor) {
          s += `color: ${style.fontColor};`
        }
        if (style.labelColor) {
          s += `background-color: ${style.labelColor};`
        }
        if (style.imgHeight) {
          s += `height: ${this.px2rem(style.imgHeight)};`
        }
        if (style.imgWidth) {
          s += `background-color: ${this.px2rem(style.imgWidth)};`
        }
        return s
      }
    },
    getIcon() {
      return (label) => {
        return this.view + label.style.labelImg
      }
    }
  },
  created() {
  },
  methods: {
    px2rem(px) {
      return px && (px / 75 * 1 + 'rem') || ''
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/utility/rem.scss';
.fixd-tag{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
.activity-label,.activity-img {
  position: absolute;
  z-index: 2;
  &.a-img{
    padding:0;
  }
  &.clear{
    position: static !important;
  }

  &.topLeft {
     left: 0;
     top: 0;
     border-radius: rem(16) 0 rem(16) 0;
   }
  &.topRight {
     right: 0;
     top: 0;
     border-radius: 0 rem(16) 0 rem(16);
   }
  &.bottomLeft {
     left: 0;
     bottom: 0;
     border-radius: 0 rem(16) 0 0;
   }
  &.bottomRight {
     right: 0;
     bottom: 0;
     border-radius: rem(16) 0 0 0;
   }
 }
}
</style>
